<template>
<!-- 推荐页面组件 -->
  <scroll-view
    scroll-y
    v-if="tuijianList.length > 0"
    class="scroll_box"
    @scrolltolower="handleToLow"
  >
    <!--    推荐开始 -->
    <view class="tuijian_box">
      <navigator
        v-for="item in tuijianList"
        :key="item.id"
        class="tuijian_item"
        :url="`/pages/album/index?id=5e5cf679e7bce739db1281e4`"
      >
        <image :src="item.thumb" class="tuijian_item_img" mode="widthFix">
        </image>
      </navigator>
    </view>
    <!--    推荐结束 -->
    <!-- 月份 -->
    <view class="body_box">
      <view class="yuefen_title">
        <view class="yuefen_title_info">
          <view class="yuefen_info">
            <text>{{ timeList.DD }}/</text> {{ timeList.MM }}月
          </view>
          <view class="yuefen_text">{{ timeList.title }}</view>
        </view>
        <view class="gengduo">更多 ></view>
      </view>
      <view class="yuefen_body">
        <view
          class="body_item"
          v-for="(item, index) in timeList.items"
          :key="item.id"
        >
          <!-- 此处使用自封超连接组件 -->
          <nav-go :list="timeList.items" :index="index">
            <image
              mode="aspectFill"
              class="item_img"
              :src="item.img + item.rule.replace('$<Height>', 360)"
            ></image
          ></nav-go>
        </view>
      </view>
    </view>
    <!-- 热门 -->
    <!-- 热门结束 -->
    <view class="remen_title">热门</view>
    <view class="remen_box">
      <view
        class="remen_item"
        v-for="(item, index) in remenList"
        :key="item.id"
        >
        <nav-go :list="remenList" :index="index">
          <image class="item_img" :src="item.thumb" mode="widthFix"></image>
        </nav-go>
      </view>
    </view>
    <!-- 月份结束 -->
  </scroll-view>
</template>
<script>
/* 导入日期处理插件 */
import moment, { months } from "moment";
/* 导入超链接组件 */
import navGo from "../../../components/navgo";
export default {
  components: {
    navGo
  },
  mounted() {
    this.getList();
    /* 动态设置导航栏标题 */
    uni.setNavigationBarTitle({
      title: "懂你找图"
    });
  },
  data() {
    return {
      pages: {
        limit: 50,
        order: "hot",
        skip: 0
      },
      tuijianList: [],
      timeList: {},
      remenList: [],
      /* 有没有新数据 */
      ifGetLIst: 1
    };
  },
  methods: {
    async getList() {
      const ress = await this.http({
        url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
        data: this.pages
      });
      if (ress.statusCode !== 200) {
        return;
      }
      //console.log(res.data.res.vertical);
      /* 是否第一次发请求 */
      if (this.tuijianList.length === 0) {
        this.tuijianList = ress.data.res.homepage[1].items;
        this.timeList = ress.data.res.homepage[2];
        /* 此处使用日期处理插件 npm */
        this.timeList.MM = moment(this.timeList.stime).format("MM");
        this.timeList.DD = moment(this.timeList.stime).format("DD");
      }
      // console.log(this.tuijianList);
      /* 判断一下有没有新数据 */

      if (ress.data.res.vertical.length === 0) {
        this.ifGetLIst = 2;
        return;
      }
      /* 拼接请求参数 */
      //console.log(this.ifGetLIst);
      //console.log(ress.data.res.vertical);
      this.remenList = [...this.remenList, ...ress.data.res.vertical];
      // console.log(this.tuijianList);
     /*  console.log(this.remenList);
      console.log(this.timeList.items); */
      
      
    },
    /* 滚动触底事件 */
    handleToLow() {
      if (this.ifGetLIst === 1) {
        this.pages.skip += this.pages.limit + this.pages.skip;
        this.getList();
      } else {
        uni.showToast({
          title: "没有数据了",
          icon: "none"
        });
        return;
      }
    }
    /*  */
  }
};
</script>
<style lang="scss" scoped>
.scroll_box {
  /* 滚动盒子高=屏幕高减去 头部标题高度 */
  height: calc(100vh - 40px);
}
.tuijian_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 10rpx;
  .tuijian_item {
    width: 50%;
    border: 3rpx solid #fff;
    border-bottom: 0;
  }
}
.body_box {
  .yuefen_title {
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
    .yuefen_title_info {
      display: flex;
      margin-left: 20rpx;
      .yuefen_info {
        color: $color;
        font-weight: 600;
        font-size: 30rpx;
        text {
          font-size: 36rpx;
          padding-right: 10rpx;
        }
      }

      .yuefen_text {
        margin-left: 20rpx;
        font-weight: 700;
        font-size: 30rpx;
      }
    }

    .gengduo {
      font-size: 24rpx;
      margin-right: 20rpx;
      color: $color;
    }
  }

  .yuefen_body {
    display: flex;
    flex-wrap: wrap;
    view.body_item {
      width: 33.3%;
      border: 5rpx solid #fff;
    }
  }
}
view.remen_title {
  border-left: 5rpx solid $color;
  padding-left: 20rpx;
  font-size: 34rpx;
  font-weight: 600;
}
view.remen_box {
  display: flex;
  flex-wrap: wrap;

  view.remen_item {
    width: 33.3%;
    border: 3rpx solid #fff;
  }
}
</style> 